<template>
	<view class="page1">
		<form action="">
			<view class="closeBox">
				<view class="closeTitle"  @click="clickClose">
				<text class="text-grey cuIcon-back"></text>	请填写报名信息：
				</view>
				<!-- <text class="text-grey cuIcon-close closeImg" @click="clickClose"></text> -->
			</view>
			<view class="cu-form-group margin-top animation-slide-bottom" :style="[{animationDelay: (0 + 1)*0.1 + 's'}]">
				<view class="title">姓名</view>
				<input placeholder="请输入您的姓名" v-model="msgData.name" name="name"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (1 + 1)*0.1 + 's'}]">
				<view class="title">性别</view>
				<picker @change="genderChange" :value="index" :range="gender">
					<view class="picker">
						{{index>-1?gender[index]:'请选择性别'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (2 + 1)*0.1 + 's'}]">
				<view class="title">专业</view>
				<input placeholder="请输入您的专业" name="major" v-model="msgData.major"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (2 + 1)*0.1 + 's'}]">
				<view class="title">年级</view>
				<input placeholder="请输入您的年级" name="grade" v-model="msgData.grade"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (3 + 1)*0.1 + 's'}]">
				<view class="title">邀请码</view>
				<input placeholder="请输入您的邀请码(可填)" name="inviteCode" v-model="msgData.inviteCode"></input>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (4 + 1)*0.1 + 's'}]">
				<view class="title">手机号码</view>
				<input placeholder="输入手机号" name="phone" v-model="msgData.phone"></input>
				<!-- <button class='cu-btn bg-green shadow' @click="getCode" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">使用微信手机号</button> -->
			</view>

			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (5 + 1)*0.1 + 's'}]">
				<view class="title">课程类型</view>
				<!-- 	<radio :class="courseType=='A'?'checked':''" :checked="courseType=='A'?true:false" value="A"></radio> -->
			</view>
			<view class="courseType-box animation-slide-bottom" :style="[{animationDelay: (6 + 1)*0.1 + 's'}]">
				<view class="course-type-item animation-slide-left" v-for="(item,index) in goodData.subType" @click="selectType(index)"
				 :style="[{animationDelay: (6 + index)*0.1 + 's'}]">
					<view class="type-box" :class="{color1:index==msgData.typeIndex,color2:index!=msgData.typeIndex}">
						<view class="type-item1">
							{{item.title}}
						</view>

						<view class="type-item1">
							￥ {{item.price}}
						</view>
					</view>
				</view>
			</view>
			<view class="buttonBox animation-slide-bottom" :style="[{animationDelay: (7 + 1)*0.1 + 's'}]">
				<button class="cu-btn round lg  bg-red baoming" @click="sumbit()">立即报名</button>
			</view>
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (8 + 1)*0.1 + 's'}]">
				<view class="title">优惠券</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @click="selectConpon" >{{msgData.coupon.title}}  {{msgData.coupon.price}}</button>
				</view>
			</view>
			
			<view class="cu-form-group animation-slide-bottom" :style="[{animationDelay: (9 + 1)*0.1 + 's'}]">
				<view class="title" style="color: gray;opacity: 0.7;">注：此课程不支持退款。</view>
			</view>
			
		</form>
	</view>
</template>
<script src="./baoming.js"></script>
<style scoped>
	.buttonBox {
		position: absolute;
		bottom: 2vh;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.baoming {

		width: 96%;
	}

	.page1 {
		height: 100%;
		background-color: white;
	}


	.closeBox {
		height: 60rpx;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
	}

	.closeImg {

		position: absolute;
		float: right;
		right: 0;
		font-size: 60rpx;
	}

	.closeTitle {
		font-weight: 600;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 10rpx;
		font-size: 30rpx;
	}

	.courseType-box {
		display: flex;
		width: 96%;
		margin-left: 2%;
		flex-wrap: wrap;
	}

	.course-type-item {
		width: 25%;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.type-box {
		margin: 0 auto;
		width: 95%;
		height: 95%;
		display: flex;
		font-size: 3.5vw;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		flex-direction: column;
	}

	.color1 {
		color: white;
		background-image: linear-gradient(135deg, #F14086, #FF9E29);
	}

	.color2 {
		color: #9C9C9C;
		background-color: #DADADA;
	}

	.type-item1 {
		text-align: center;
		width: 100%;
	}
</style>
